// import '../css/base.css'
// import '../css/style.css'
let isLoading
let isPhone
const imgArrs = [
    './image/universe/loading.gif',
    './image/industry/panel_center.png',
    "./image/agriculture/small_board.png",
    './image/universe/yuzhou_bg.png',
    './image/universe/top_bg.png',
    './image/universe/play.png',
    './image/universe/logo.png',
    './image/universe/download.png',
    './image/universe/stars1.png',
    './image/universe/stars2.png',
    './image/universe/stars3.png',
    './image/universe/stars4.png',
    './image/universe/stars5.png',
    './image/universe/door_behind.png',
    './image/universe/door.png',
    './image/universe/door_halo.png',
    './image/universe/door_core.png',
    './image/universe/door_front.png',
    './image/universe/aerocraft1.png',
    './image/universe/aerocraft2.png',
    './image/universe/aerocraft3.png',
    './image/universe/alien1.png',
    './image/universe/alien2.png',
    './image/universe/migration.png',
    './image/universe/star1.png',
    './image/universe/star2.png',
    './image/universe/star3.png',
    './image/scienceTechnology/keji_bg.png',
    './image/scienceTechnology/space_station.png',
    './image/scienceTechnology/star.png',
    './image/scienceTechnology/rocket1.png',
    './image/scienceTechnology/rocket2.png',
    './image/scienceTechnology/rocket3.png',
    './image/scienceTechnology/rocket4.png',
    './image/scienceTechnology/rocket5.png',
    './image/scienceTechnology/rocket6.png',
    './image/scienceTechnology/rocket7.png',
    './image/scienceTechnology/rocket8.png',
    './image/scienceTechnology/rocket9.png',
    './image/scienceTechnology/rocket10.png',
    './image/scienceTechnology/rocket11.png',
    './image/scienceTechnology/twinkling.png',
    './image/scienceTechnology/architecture.png',
    './image/scienceTechnology/architecture_core.png',
    './image/scienceTechnology/shelter_up.png',
    './image/scienceTechnology/introduce_bg.png',
    './image/scienceTechnology/cylinder_light.png',
    './image/scienceTechnology/transverse_light.png',
    './image/scienceTechnology/golden_light.png',
    './image/scienceTechnology/angel_egg.png',
    './image/scienceTechnology/bug_btn.png',
    './image/scienceTechnology/blu_ray.png',
    './image/scienceTechnology/technology_egg.png',
    './image/scienceTechnology/purple_light.png',
    './image/scienceTechnology/suit_egg.png',
    './image/scienceTechnology/platform_bg.png',
    './image/scienceTechnology/skeleton2.png',
    './image/scienceTechnology/skeleton_light.png',
    './image/scienceTechnology/Attribute.png',
    './image/scienceTechnology/hexagon3.png',
    './image/scienceTechnology/hexagon.png',
    './image/scienceTechnology/shelter_down.png',
    './image/industry/industry_bg.png',
    './image/industry/industry_bg_1.png',
    './image/industry/industry_fire1.png',
    './image/industry/industry_fire2.png',
    './image/industry/industry_fire3.png',
    './image/industry/spark1.png',
    './image/industry/spark2.png',
    './image/industry/spark3.png',
    './image/industry/worker1.png',
    './image/industry/worker2.png',
    './image/industry/worker3.png',
    './image/industry/worker4.png',
    './image/industry/airship1.png',
    './image/industry/airship2.png',
    './image/industry/airship3.png',
    './image/industry/industry_up.png',
    './image/industry/industry_down.png',
    './image/industry/panel_up.png',
    './image/industry/panel_down.png',
    './image/industry/panel_effects.png',
    './image/industry/panel_up_line.png',
    './image/industry/panel_down_line.png',
    './image/industry/spark.png',
    './image/agriculture/agriculture_bg.jpg',
    './image//agriculture/smoke1.png',
    './image//agriculture/smoke2.png',
    './image//agriculture/smoke3.png',
    './image//agriculture/smoke4.png',
    './image//agriculture/cloud1.png',
    './image//agriculture/cloud2.png',
    './image//agriculture/cloud3.png',
    './image//agriculture/cloud4.png',
    './image//agriculture/bird1.png',
    './image//agriculture/bird2.png',
    './image//agriculture/bird3.png',
    './image//agriculture/bird4.png',
    './image/agriculture/farmer.png',
    './image/agriculture/nongye_bg_before.png',
    './image/agriculture/big_board.png',
    './image/agriculture/handle.png',
    './image/agriculture/arrow1.png',
    './image/agriculture/luminescence.png',
    './image/agriculture/EVO_token.png',
    './image/agriculture/sell.png',
    './image/agriculture/transaction.png',
    './image/agriculture/culture.png',
    './image/stoneArtifact/shiqi_bg.jpg',
    './image/stoneArtifact/fox.png',
    './image/stoneArtifact/fox_shelter.png',
    './image/stoneArtifact/gun1.png',
    './image/stoneArtifact/gun2.png',
    './image/stoneArtifact/leaf1.png',
    './image/stoneArtifact/leaf2.png',
    './image/stoneArtifact/leaf3.png',
    './image/stoneArtifact/skeleton1.png',
    './image/stoneArtifact/skeleton2.png',
    './image/stoneArtifact/skeleton3.png',
    './image/stoneArtifact/skeleton7.png',
    './image/stoneArtifact/skeleton6.png',
    './image/stoneArtifact/skeleton4.png',
    './image/stoneArtifact/skeleton5.png',
    './image/stoneArtifact/skeleton8.png',
    './image/stoneArtifact/slate_light.png',
    './image/stoneArtifact/slate.png',
    './image/stoneArtifact/history.png',
    './image/stoneArtifact/shiqi_end_bg.png',
    './image/stoneArtifactFoot/PARTNERS.png',
    './image/stoneArtifactFoot/network.png',
    './image/stoneArtifactFoot/maker.png',
    './image/stoneArtifactFoot/aave.png',
    './image/stoneArtifactFoot/ubisoft.png',
    './image/stoneArtifactFoot/binance.png',
    './image/stoneArtifactFoot/samsung.png',
    './image/stoneArtifactFoot/LOGO.png',
    './image/stoneArtifactFoot/icon1.png',
    './image/stoneArtifactFoot/icon2.png',
    './image/stoneArtifactFoot/icon3.png',
    './image/stoneArtifactFoot/icon4.png',
    './image/stoneArtifactFoot/icon5.png',
    './image/phoneStatic/bg1.png',
    './image/phoneStatic/content1.png',
    './image/phoneStatic/bg2.png',
    './image/phoneStatic/content2.png',
    './image/phoneStatic/bg3.png',
    './image/phoneStatic/content3.png',
    './image/phoneStatic/bg4.png',
    './image/phoneStatic/content4.png',
    './image/phoneStatic/bg5.png',
    './image/phoneStatic/content5.png',
    // './image/phoneStatic/bg6.png',
    './image/phoneStatic/arrow.png',
]

let EvoURL = "http://tbk.mpcheshi.com/EvoSurfersIntroduce/#/"
let GameURL = "http://tbk.mpcheshi.com/EvoSurfersIntroduce/#/recommend"
let PlayURL = "http://tbk.mpcheshi.com/EvoSurfersIntroduce/#/coming"
let PresaleUrl = "http://tbk.mpcheshi.com/EvoSurfersIntroduce/#/presale"
let HelpURL = "https://wiki.evosurfers.com"
let WhitepaperURL = "https://docs.evosurfers.com/"


function getWidth() {
    let industry_phone_bg = document.getElementById('industry_phone_bg')
    let screenWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
    if (screenWidth <= 450) {
        industry_phone_bg.style.height = '100%'
        isPhone = true
    } else {
        industry_phone_bg.style.height = "0"
        isPhone = false
    }
}
getWidth()

window.onresize = function () {
    getWidth()
}

let count = document.getElementById('loadingNum')
let totalArrs = imgArrs.length
let current = 0
const loadImg = () => {
    const img = new Image()
    if (!imgArrs.length) return;
    img.src = imgArrs[0]
    img.onload = () => {
        setTimeout(() => {
            imgArrs.shift()
            current++
            count.innerHTML = Math.floor((current / totalArrs) * 100) + "%";
            loadImg()
            if (imgArrs.length == 0) {
                isLoading = true
            }
            showhide()
        })
    }


}
loadImg()
function showhide() {
    let loading = document.getElementById("loading");
    let homePage = document.getElementById("homePage");
    if (isLoading) {
        loading.style.display = "none";
        homePage.style.display = "block";
        document.body.style.backgroundColor = "#fff"
    }
}


$(function () {
    $("img").Lazy({ effect: "fadeIn" });
    countDown("2022/4/20");
    $('.tab li').click(function () {
        var index = $(this)[0].dataset.index;
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        if (index == 1) {
            window.location.href = GameURL;
        } else if (index == 2) {
            window.location.href = EvoURL
        } else if (index == 3) {
            window.open(HelpURL, '_blank')
        } else if (index == 4) {
            window.open(WhitepaperURL, '_blank')
        }
        // else {
        //     if (index == 3) {
        //         if ($('.list').is(':hidden')) {
        //             $('.list').show();
        //             $('.download').removeClass('drop_down')
        //             $('.download').addClass('drop_up')
        //         } else {
        //             $('.list').hide();
        //             $('.download').removeClass('drop_up')
        //             $('.download').addClass('drop_down')
        //         }
        //     } else {
        //         $('.list').hide();
        //         $('.download').removeClass('drop_up')
        //         $('.download').addClass('drop_down')
        //     }
        // }

    })

    $('.phone_tab li').click(function () {
        let phone_top_bg = document.getElementById('phone_top_bg')
        let phone_tab = document.getElementById('phone_tab')
        let phone_download = document.getElementById('phone_download')
        var index = $(this)[0].dataset.index;
        if (index == 1) {
            window.location.href = GameURL;
        } else if (index == 2) {
            window.location.href = EvoURL
        } else if (index == 3) {
            window.open(HelpURL, '_blank')
            phone_tab.style.display = "none";
            phone_top_bg.style.display = "block"
            $(phone_top).removeClass("phone_menu");
            $(phone_download).removeClass("drop_down")
            $(phone_download).addClass("drop_up")
            document.body.style.height = "unset"
        } else if (index == 4) {
            window.open(WhitepaperURL, '_blank')
            phone_tab.style.display = "none";
            phone_top_bg.style.display = "block"
            $(phone_top).removeClass("phone_menu");
            $(phone_download).removeClass("drop_down")
            $(phone_download).addClass("drop_up")
            document.body.style.height = "unset"
        }
    })

    showFloorList(1);
    showFloorList(2);
    showFloorList(3);
    showFloorList(4);
    up(1);
    down(1);
    up(2);
    down(2);
    up(3);
    down(3);
    up(4);
    down(4);
    $('.list4 .panel_up').bind("webkitAnimationEnd", function () {
        if ($('.list4 .panel_up').is('.opacity1')) {
            $('.panel_up_line').addClass('panel_down_animation1')
            $('.panel_down_line').addClass('panel_up_animation1')
        }
    })

    $('.panel_up_line').bind("webkitAnimationEnd", function () {
        if ($('.panel_up_line').is('.panel_down_animation1')) {
            $('.panel_up_line').removeClass('panel_down_animation1')
            $('.panel_up_line').addClass('opacity1')
            $('.list1 .spark_up').addClass('spark_up_anmaition')
            $('.list1 .spark_up_90').addClass('spark_up_anmaition_90')
            // $('.phone_floor_left').addClass('phone_floor_show')
            // $('.phone_floor_right').addClass('phone_floor_show')
        }
    })
    $('.list1 .spark_up').bind("webkitAnimationEnd", function () {
        if ($('.list1 .spark_up').is(".spark_up_anmaition")) {
            $('.list1 .spark_up').removeClass('spark_up_anmaition')
            $('.list2 .spark_up').addClass('spark_up_anmaition')
        }
    })
    $('.list2 .spark_up').bind("webkitAnimationEnd", function () {
        if ($('.list2 .spark_up').is(".spark_up_anmaition")) {
            $('.list2 .spark_up').removeClass('spark_up_anmaition')
            $('.list3 .spark_up').addClass('spark_up_anmaition')
        }
    })
    $('.list3 .spark_up').bind("webkitAnimationEnd", function () {
        if ($('.list3 .spark_up').is(".spark_up_anmaition")) {
            $('.list3 .spark_up').removeClass('spark_up_anmaition')
            $('.list1 .spark_up').addClass('spark_up_anmaition')
        }
    })

    $('.list1 .spark_up_90').bind("webkitAnimationEnd", function () {
        if ($('.list1 .spark_up_90').is(".spark_up_anmaition_90")) {
            $('.list1 .spark_up_90').removeClass('spark_up_anmaition_90')
            $('.list2 .spark_up_90').addClass('spark_up_anmaition_90')
        }
    })
    $('.list2 .spark_up_90').bind("webkitAnimationEnd", function () {
        if ($('.list2 .spark_up_90').is(".spark_up_anmaition_90")) {
            $('.list2 .spark_up_90').removeClass('spark_up_anmaition_90')
            $('.list3 .spark_up_90').addClass('spark_up_anmaition_90')
        }
    })
    $('.list3 .spark_up_90').bind("webkitAnimationEnd", function () {
        if ($('.list3 .spark_up_90').is(".spark_up_anmaition_90")) {
            $('.list3 .spark_up_90').removeClass('spark_up_anmaition_90')
            $('.list1 .spark_up_90').addClass('spark_up_anmaition_90')
        }
    })


    $('.panel_down_line').bind("webkitAnimationEnd", function () {
        if ($('.panel_down_line').is('.panel_up_animation1')) {
            $('.panel_down_line').removeClass('panel_up_animation1')
            $('.panel_down_line').addClass('opacity1')
            $('.list3 .spark_down').addClass('spark_down_anmaition')
            $('.list3 .spark_down_90').addClass('spark_down_anmaition_90')
        }
    })
    $('.list3 .spark_down').bind("webkitAnimationEnd", function () {
        if ($('.list3 .spark_down').is(".spark_down_anmaition")) {
            $('.list3 .spark_down').removeClass('spark_down_anmaition')
            $('.list2 .spark_down').addClass('spark_down_anmaition')
        }
    })
    $('.list2 .spark_down').bind("webkitAnimationEnd", function () {
        if ($('.list2 .spark_down').is(".spark_down_anmaition")) {
            $('.list2 .spark_down').removeClass('spark_down_anmaition')
            $('.list1 .spark_down').addClass('spark_down_anmaition')
        }
    })
    $('.list1 .spark_down').bind("webkitAnimationEnd", function () {
        if ($('.list1 .spark_down').is(".spark_down_anmaition")) {
            $('.list1 .spark_down').removeClass('spark_down_anmaition')
            $('.list3 .spark_down').addClass('spark_down_anmaition')
        }
    })

    $('.list1 .spark_down_90').bind("webkitAnimationEnd", function () {
        if ($('.list1 .spark_down_90').is(".spark_down_anmaition_90")) {
            $('.list1 .spark_down_90').removeClass('spark_down_anmaition_90')
            $('.list3 .spark_down_90').addClass('spark_down_anmaition_90')
        }
    })
    $('.list2 .spark_down_90').bind("webkitAnimationEnd", function () {
        if ($('.list2 .spark_down_90').is(".spark_down_anmaition_90")) {
            $('.list2 .spark_down_90').removeClass('spark_down_anmaition_90')
            $('.list1 .spark_down_90').addClass('spark_down_anmaition_90')
        }
    })
    $('.list3 .spark_down_90').bind("webkitAnimationEnd", function () {
        if ($('.list3 .spark_down_90').is(".spark_down_anmaition_90")) {
            $('.list3 .spark_down_90').removeClass('spark_down_anmaition_90')
            $('.list2 .spark_down_90').addClass('spark_down_anmaition_90')
        }
    })


    $('.industry_fire1').addClass('fire1_animation');
    $('.industry_fire1').bind("webkitAnimationEnd", function () {
        if ($('.industry_fire1').is('.fire1_animation')) {
            $('.industry_fire1').removeClass('fire1_animation')
            $('.spark3').addClass('sparkAnimation')
            $('.industry_fire1').addClass('opacity1')
        } else if ($('.industry_fire1').is('.opacity100-0')) {
            $('.industry_fire1').removeClass('opacity100-0')
            $('.industry_fire1').addClass('fire1_animation')
        }
    })
    $('.spark3').bind("webkitAnimationEnd", function () {
        $('.spark3').removeClass('sparkAnimation')
        $('.industry_fire1').removeClass('opacity1')
        $('.industry_fire1').addClass('opacity100-0')
    })

    $('.industry_fire2').addClass('fire2_animation');
    $('.industry_fire2').bind("webkitAnimationEnd", function () {
        if ($('.industry_fire2').is('.fire2_animation')) {
            $('.industry_fire2').removeClass('fire2_animation')
            $('.spark2').addClass('sparkAnimation')
            $('.industry_fire2').addClass('opacity1')
        } else if ($('.industry_fire2').is('.opacity100-0')) {
            $('.industry_fire2').removeClass('opacity100-0')
            $('.industry_fire2').addClass('fire2_animation')
        }
    })
    $('.spark2').bind("webkitAnimationEnd", function () {
        $('.spark2').removeClass('sparkAnimation')
        $('.industry_fire2').removeClass('opacity1')
        $('.industry_fire2').addClass('opacity100-0')
    })

    $('.industry_fire3').addClass('fire3_animation');
    $('.industry_fire3').bind("webkitAnimationEnd", function () {
        if ($('.industry_fire3').is('.fire3_animation')) {
            $('.industry_fire3').removeClass('fire3_animation')
            $('.spark1').addClass('sparkAnimation')
            $('.industry_fire3').addClass('opacity1')
        } else if ($('.industry_fire3').is('.opacity100-0')) {
            $('.industry_fire3').removeClass('opacity100-0')
            $('.industry_fire3').addClass('fire3_animation')
        }
    })
    $('.spark1').bind("webkitAnimationEnd", function () {
        $('.spark1').removeClass('sparkAnimation')
        $('.industry_fire3').removeClass('opacity1')
        $('.industry_fire3').addClass('opacity100-0')
    })
    function showFloorList(num) {
        var dom = $(`.floor_list${num}`);
        dom.bind("webkitAnimationEnd", function () {
            dom.removeClass('list1_center');
            dom.addClass('opacity1');
            $(`.list${num} .panel_up`).addClass('panel_up_animation1');
            $(`.list${num} .panel_down`).addClass('panel_down_animation1');
        })
    }
    function up(num) {
        var dom = $(`.list${num} .panel_up`);
        var effects = $(`.list${num} .panel_effects`);
        var list = $(`.floor_list${num + 1}`);
        dom.bind("webkitAnimationEnd", function () {
            if (dom.is('.panel_up_animation1')) {
                dom.removeClass('panel_up_animation1');
                dom.addClass('panel_up_animation2');
                effects.addClass('panel_effects_animation');
            } else if (dom.is('.panel_up_animation2')) {
                dom.removeClass('panel_up_animation2');
                effects.addClass('panel_effects_animation');
                list.addClass('list1_center');
                dom.addClass('opacity1');
            }
        })
    }
    function down(num) {
        var dom = $(`.list${num} .panel_down`);
        dom.bind("webkitAnimationEnd", function () {
            if (dom.is('.panel_down_animation1')) {
                dom.removeClass('panel_down_animation1');
                dom.addClass('panel_down_animation2');
            } else if (dom.is('.panel_down_animation2')) {
                dom.removeClass('panel_down_animation2');
                dom.addClass('opacity1');
            }
        })
    }

    $('.platform_bg').bind("webkitAnimationEnd", function () {
        $('.platform_bg').removeClass('platformAnimation');
        $('.platform_bg_1').removeClass('platformAnimation');
        $('.platform_bg_2').removeClass('platformAnimation');
        $('.platform_bg').addClass('opacity1');
        $('.platform_bg_1').addClass('opacity1');
        $('.platform_bg_2').addClass('opacity1');
        $('.platform_skeleton2').addClass('opacity1');
        $('.skeleton_light').addClass('skeleton_light_animation');
        $('.hexagon3').addClass('hexagonAnimation');
        $('.Attribute').addClass('hexagonAnimation');
        $('.hexagon_bg').addClass('hexagonAnimation');
    })


    transformation('slate', 'scale_slate', 'opacity1')
    transformation('slate_phone', 'scale_slate', 'opacity1')
    transformation('slate_light', 'scale_slate_light', 'slate_light_twinkle')
    transformation('hexagon3', 'hexagonAnimation', 'opacity1')
    transformation('Attribute', 'hexagonAnimation', 'opacity1')
    transformation('hexagon_bg', 'hexagonAnimation', 'opacity1')
    transformation('big_board', 'boardAnimation', 'opacity1', 'arrow1', 'boardAnimation')
    transformation('big_board', 'boardAnimation', 'opacity1', 'phone_arrow1', 'boardAnimation')
    transformation('arrow1', 'boardAnimation', 'opacity1', 'EVO', 'boardAnimation')
    transformation('phone_arrow1', 'boardAnimation', 'opacity1', 'EVO', 'boardAnimation')
    transformation('EVO', 'boardAnimation', 'opacity1', 'arrow2', 'boardAnimation')
    transformation('EVO', 'boardAnimation', 'opacity1', 'arrowGroup', 'boardAnimation')
    transformation('arrowGroup', 'boardAnimation', 'opacity1', 'small_board_phone', 'boardAnimation')
    transformation('small_board_phone', 'boardAnimation', 'opacity1')
    transformation('arrow2', 'boardAnimation', 'opacity1', 'small_board1', 'boardAnimation')
    transformation('small_board1', 'boardAnimation', 'opacity1', 'arrow3', 'boardAnimation')
    transformation('arrow3', 'boardAnimation', 'opacity1', 'small_board2', 'boardAnimation')
    transformation('small_board2', 'boardAnimation', 'opacity1', 'arrow4', 'boardAnimation')
    transformation('arrow4', 'boardAnimation', 'opacity1', 'small_board3', 'boardAnimation')
    transformation('small_board3', 'boardAnimation', 'opacity1')

    function transformation(dom, removeClass, addClass, dom2, continueClass) {
        var dom = $(`.${dom}`)
        dom.bind("webkitAnimationEnd", function () {
            dom.removeClass(removeClass);
            dom.addClass(addClass);
            if (dom2) {
                $(`.${dom2}`).addClass(continueClass);
            }
        })
    }
    // function
    $(window).scroll(function () {
        srcollAnimation("keji", 'platform_bg', 'platformAnimation')
        srcollAnimation("keji", 'platform_bg_1', 'platformAnimation')
        srcollAnimation("keji", 'platform_bg_2', 'platformAnimation')
        srcollAnimation("gongye", 'floor_list1', 'list1_center')
        srcollAnimation("shiqi", 'slate', 'scale_slate')
        srcollAnimation("shiqi_phone_bg", 'slate_phone', 'scale_slate')
        srcollAnimation("shiqi", 'slate_light', 'scale_slate_light');
        srcollAnimation("nongye", 'big_board', 'boardAnimation');
    });

    replaceAnimation(".fox", null, "translatefox", "opacity0-2")
    replaceAnimation(".bird1", null, "animation_bird1", "opacity0-12");
    replaceAnimation(".bird2", null, "animation_bird2", "opacity0-10");
    replaceAnimation(".bird3", null, "animation_bird3", "opacity0-8");
    replaceAnimation(".bird4", null, "animation_bird4", "opacity0-6");
    replaceAnimation(".aerocraft1", ".migration1", "aerocraft_animation1", "migration_animation1");
    replaceAnimation(".aerocraft2", ".migration1", "aerocraft_animation2", "migration_animation1");
    replaceAnimation(".migration2", ".aerocraft3", "migration_animation2", "aerocraft_animation3");

    rocket(1, 6, 20);
    rocket(2, 4, 15);
    rocket(3, 13, 22);
    rocket(4, 15, 19);
    rocket(5, 14, 6);
    rocket(6, 13, 15);
    rocket(7, 9, 30);
    rocket(8, 10, 44);
    rocket(9, 18, 34);
    rocket(10, 10, 7);
    rocket(11, 17, 22);
    function rocket(number, time, delay) {
        var style = $(`
          <style type="text/css">
              .rocket-animation${number} {
                  animation: rocket${number} ${time || 10}s ${delay || 0}s linear;
              }
              .twinkl${number} {
                  animation: twinkling 0.8s linear;
              }
          </style>
      `)
        $($('head')[0]).append(style);
        var rocketDiv = $(`.rocket${number}`);
        var twinklingDiv = $(`.twinkling${number}`);
        rocketDiv.addClass(`rocket-animation${number}`);
        rocketDiv.bind("webkitAnimationEnd", function () {
            rocketDiv.removeClass(`rocket-animation${number}`);
            twinklingDiv.addClass(`twinkl${number}`);
        });
        twinklingDiv.bind("webkitAnimationEnd", function () {
            twinklingDiv.removeClass(`twinkl${number}`);
            rocketDiv.addClass(`rocket-animation${number}`);
        })
    }


    function srcollAnimation(area, dom, className, distance) {
        var areaDom = $(`.${area}`);
        var animationDom = $(`.${dom}`)
        var areaDomScroll = areaDom.offset().top;
        if (areaDomScroll >= $(window).scrollTop() && areaDomScroll < ($(window).scrollTop() + $(window).height() - (distance || 400))) {
            if (!animationDom.is(`.${className}`) && !animationDom.is(".opacity1")) {
                animationDom.addClass(className);
            } else {
                return
            }
        }
    }


    function replaceAnimation(className1, className2, animation1, animation2) {
        var animationDiv1 = $(className1);
        animationDiv1.addClass(animation1);
        if (className2) {
            var animationDiv2 = $(className2);
            animationDiv1.bind("webkitAnimationEnd", function () {
                animationDiv1.removeClass(animation1);
                animationDiv2.addClass(animation2);
            });
            animationDiv2.bind("webkitAnimationEnd", function () {
                animationDiv2.removeClass(animation2);
                animationDiv1.addClass(animation1);
            })
        } else {
            animationDiv1.bind("webkitAnimationEnd", function () {
                if (animationDiv1.is(`.${animation1}`)) {
                    animationDiv1.removeClass(`${animation1}`);
                    animationDiv1.addClass(`${animation2}`);
                } else if (animationDiv1.is(`.${animation2}`)) {
                    animationDiv1.removeClass(`${animation2}`);
                    animationDiv1.addClass(`${animation1}`);
                }
            });
        }
    }


    function countDown(time) {
        var starttime = new Date(time);
        setInterval(function () {
            var nowtime = new Date();
            var time = starttime - nowtime;
            var hours = parseInt(time / 1000 / 60 / 60);
            var minutes = parseInt(time / 1000 / 60 % 60);
            var seconds = parseInt(time / 1000 % 60);
            hours = hours.toString().length == 1 ? '0' + hours : hours;
            minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
            seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;
            $('#hours').html(hours)
            $('#minutes').html(minutes)
            $('#seconds').html(seconds)
            $('#static_hours').html(hours)
            $('#static_minutes').html(minutes)
            $('#static_seconds').html(seconds)
        }, 1000);
    }
})

function goToEvo() {
    window.location.href = EvoURL;
}


function goToPresale() {
    window.location.href = PresaleUrl;
}

function clickPhoneDown() {
    let phone_top = document.getElementById('phone_top')
    let phone_top_bg = document.getElementById('phone_top_bg')
    let phone_tab = document.getElementById('phone_tab')
    let phone_download = document.getElementById('phone_download')
    if (phone_tab.style.display == "none" || phone_tab.style.display == '') {
        phone_tab.style.display = "block";
        phone_top_bg.style.display = "none"
        document.body.style.height = "100vh"
        $(phone_top).addClass("phone_menu");
        $(phone_download).removeClass("drop_up")
        $(phone_download).addClass("drop_down")
    } else {
        phone_tab.style.display = "none";
        phone_top_bg.style.display = "block"
        $(phone_top).removeClass("phone_menu");
        $(phone_download).removeClass("drop_down")
        $(phone_download).addClass("drop_up")
        document.body.style.height = "unset"
    }
}

function clickPhoneSecondDown() {
    let phone_top_list = document.getElementById('phone_top_list')
    let phone_second_download = document.getElementById('phone_second_download')
    if (phone_top_list.style.display == "none" || phone_top_list.style.display == '') {
        phone_top_list.style.display = "block";
        $(phone_second_download).removeClass("drop_up")
        $(phone_second_download).addClass("drop_down")
    } else {
        phone_top_list.style.display = "none";
        $(phone_second_download).removeClass("drop_down")
        $(phone_second_download).addClass("drop_up")
    }
}

function clickPlay() {
    window.location.href = PlayURL
}

function footPath(val) {
    if (val == 1) {
        window.open("https://discord.com/invite/tPtnxqeq", "_blank")
    } else if (val == 2) {
        window.open("https://medium.com/@EvoSurfers", "_blank")
    } else if (val == 3) {
        window.open("https://www.facebook.com/profile.php?id=100077168392185", "_blank")
    } else if (val == 4) {
        window.open("https://www.youtube.com/channel/UCcXG_vPnNzet27Q4A76gL7g", "_blank")
    } else if (val == 5) {
        window.open("https://twitter.com/EvoSurfers", "_blank")
    } else if (val == 6) {
        window.open("https://t.me/EvoSurfers", "_blank")
    }
}
